<template>
  <div class="details_contain">
    <!-- 详情 -->
    <van-tabs scrollspy sticky>
      <van-icon name="arrow-left" @click="$router.go(-1)" />
      <van-tab title="商品">
        <div class="contain1">
          <div class="contain-tu">
            <van-swipe @change="onChange">
              <van-swipe-item v-for="banner in pics" :key="banner.id">
                <img :src="banner.pic" alt="" />
              </van-swipe-item>
              <template #indicator>
                <div class="custom-indicator">
                  {{ current + 1 }}/{{ picnum }}
                </div>
              </template>
            </van-swipe>
            <div class="product_information">
              <div class="pi_price">￥ {{ this.basicInfo.minPrice }}</div>
              <div class="pi_name"><span>自营</span>{{ basicInfo.name }}</div>
            </div>
          </div>
          <div class="synopsis">
            <div class="syn_msg">专业品质 行业领英 大家风范</div>
            <div class="syn_img">
              <img src="./../../assets/img/youshi.png" />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="详情" v-html="this.content">a</van-tab>
    </van-tabs>
    <!-- 详情结束 -->
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon
        icon="wap-home-o"
        @click="$router.push('/home')"
        text="首页"
      />
      <van-goods-action-icon
        :icon="icon"
        color="red"
        text="收藏"
        @click="addfavor(specification.id)"
      />
      <van-goods-action-icon
        icon="cart-o"
        @click="$router.push('/cart')"
        text="购物车"
      />
      <van-goods-action-button
        color="#0075c2"
        type="danger"
        text="加入购物车"
        @click="showSpecification()"
      />
    </van-goods-action>
    <!-- 底部结束 -->
    <!-- 弹出层 -->
    <van-popup
      v-model="isShow"
      position="bottom"
      closeable
      :style="{ height: '4.8rem' }"
    >
      <van-card
        :num="specification.number"
        :price="specification.minPrice"
        :title="specification.name"
        :thumb="specification.pic"
      >
        <template #footer>
          <van-stepper v-model="specification.number" />
          <van-button color="#ff344d" @click="addCart(specification.id)">
            确定
          </van-button>
        </template>
      </van-card>
    </van-popup>
    <!-- 弹出层结束 -->
  </div>
</template>

<script>
import { productdetails, addCart, addfavor, favorYesorNo, delfavor } from '_api'
import { getToken } from '_utils/token.js'
import { Toast } from 'vant'
export default {
  data () {
    return {
      current: 0,
      basicInfo: [],
      pics: [],
      content: '',
      picnum: '',
      specification: {},
      isShow: false,
      icon: 'like-o'
    }
  },
  created () {
    this.productDetails()
    this.firstgo(this.$route.params.id)
  },
  methods: {
    chatting () {
      window.location.href =
        'tencent://message/?uin=15379653&Site=Sambow&Menu=yes'
    },
    onChange (index) {
      this.current = index
    },
    productDetails () {
      productdetails({ id: this.$route.params.id }).then((res) => {
        this.basicInfo = res.data.data.basicInfo
        this.content = res.data.data.content
        this.pics = res.data.data.pics
        var ppics = this.pics
        this.picnum = ppics.length
        this.specification = {
          ...this.basicInfo,
          number: 1
        }
      })
    },
    showSpecification () {
      this.isShow = true
    },
    addCart (id) {
      addCart({
        number: this.specification.number,
        goodsId: id,
        token: getToken()
      }).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          Toast.success('剁手成功')
        }
        this.$store.commit('Goods/cartgoodschange', {
          goodslist: res.data.data.items,
          goodsallnum: res.data.data.number
        })
      })
    },
    firstgo (id) {
      favorYesorNo({
        goodsId: id,
        type: 0,
        token: getToken()
      }).then((res) => {
        console.log(res)
        if (res.data.code === -1) {
          this.icon = 'like-o'
        } else {
          this.icon = 'like'
        }
      })
    },
    addfavor (id) {
      favorYesorNo({
        goodsId: id,
        type: 0,
        token: getToken()
      }).then((res) => {
        console.log(res)
        if (res.data.code === -1) {
          addfavor({
            goodsId: id,
            type: 0,
            token: getToken()
          }).then((res) => {
            this.icon = 'like'
            Toast.success('收藏成功')
          })
        }
        if (res.data.code === 0) {
          delfavor({
            goodsId: id,
            token: getToken()
          }).then((res) => {
            this.icon = 'like-o'
            if (res.data.code === 0) {
              Toast.success('取消收藏')
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.details_contain {
  background: #f3f5f7;
}
/deep/ .van-tabs {
  .van-tabs__content {
    padding-top: 0.1rem;
  }
  .van-tabs__nav {
    width: 50%;
    margin: 0 auto;
    background: #fff;
  }
  .van-tabs__wrap {
    /* 阴影向右偏移10px、向下偏移10px、模糊距离为20px、阴影尺寸为10px、颜色为pink*/
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
    background: #fff;
    height: 0.88rem;
  }
  i.van-icon.van-icon-arrow-left {
    position: fixed;
    top: 0;
    left: 0.3rem;
    z-index: 99999;
    font-size: 0.36rem;
    line-height: 0.88rem;
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
/deep/ .contain-tu {
  padding: 0 0.15rem;
  .van-swipe {
    width: 100%;
  }
  .van-swipe-item {
    width: 7.2rem;
    height: 7.2rem;
    background: rosybrown;
    border-radius: 0.2rem;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.synopsis {
  width: 100%;
  border-radius: 0.2rem;
  background: #fff;
  margin: 0.3rem 0 0.3rem;
  overflow: hidden;
  .syn_msg {
    text-align: center;
    font-weight: 700;
    line-height: 0.48rem;
    font-size: 0.36rem;
    padding: 0.1rem 0.4rem;
    border-bottom: 1px solid #999;
  }
  img {
    width: 100%;
  }
}
.pi_name {
  line-height: 0.6rem;
  font-size: 0.34rem;
  display: inline-block;
  span {
    display: inline-block;
    background: royalblue;
    padding: 0 0.12rem;
    color: #fff;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: 0.28rem;
    margin-right: 0.2rem;
  }
}
/deep/ .van-tab__pane:nth-child(3) {
  text-align: center;
  background: #fff;

  padding-bottom: 1rem;
  img {
    max-width: 100%;
  }
  span {
    font-size: 0.36rem !important;
    line-height: 0.5rem !important;
    color: #000 !important;
  }
}
.pi_price {
  font-size: 0.4rem;
  line-height: 0.7rem;
  font-weight: 700;
  color: red;
}
button.van-button.van-button--danger.van-button--large.van-goods-action-button.van-goods-action-button--first.van-goods-action-button--last.van-goods-action-button--danger {
  border-radius: 0;
}
.van-popup {
  overflow: hidden;
  .van-card {
    .van-button {
      text-align: center;
      width: 100%;
      margin: 1.2rem auto 0;
    }
    .van-card__title {
      font-size: 0.32rem;
      font-weight: 700;
      line-height: 0.6rem;
    }
    .van-card__price {
      color: red;
      font-size: 0.32rem;
      line-height: 1rem;
      font-weight: 700;
    }
    .van-card__num {
      font-size: 0.32rem;
      line-height: 1rem;
    }
  }
}
</style>
